React Router己經更新到v6版本了，它和v5版本在使用上有些許不同。

1. 不再使用Switch標籤，改為Routes標籤，將所有不同的route包裝在< Routes >中。

2. 每個路由組件不需內崁在< Route>< /Route>中，改為< Route /> Self-closing tag。
每個路由組件，都需設定element ={prop} 指派這條路徑要顯示的頁面組件。

< Route path="/about" element={< About/>} />

3. react v6 不再支持exact path="/"，這是因為默認情況下所有路徑都完全匹配。

4. Add a “No Match”Route,
當沒有其他路由與 URL 匹配時，可以使用path="*".路由器僅在沒有其他路由匹配時才會選擇它。
在element prop={}可寫入jsx語法，顯示畫面。

< Route path="*" element={(
          <div>
             <h1>Error 404 </h1>
             <P> Page  not found  </P>
          < /div>
        )} /> 

之前V5路由設定如下

import { BrowserRouter, Link,Navigate, Route,Switch} from 'react-router-dom'

    <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about">
             <About />
          </Route>
          <Route path="/products/:id">
             <ProductDetails />
          </Route>
          <Route path="/products">
             <Products />
          </Route>
     </Switch>
     

V6新的設定

import { BrowserRouter, Link,Navigate, Route,Routes} from 'react-router-dom'

<Routes>
      <Route path="/" element={<Home/>} />
      <Route path="/about" element={<About/>} />          
      <Route path="/products/:id" ement={<ProductDetails />} />   
      <Route path="/products" element={<Products />} />            
</Routes>